<template>
  <div class="assetModel">
    <!-- <img
      src="../assets/shezhi.png"
      alt=""
      class="setting"
      v-if="isDark == 1"
      @click="showSetting = true"
    />
    <img
      src="../assets/shezhi1.png"
      alt=""
      class="setting"
      v-if="isDark == 0"
      @click="showSetting = true"
    /> -->
    <div class="assetCardModel">
      <div class="font14 m_b_10 gl">
        {{ $t("allasset") }}
      </div>
      <div class="font15 m_b_10 gl">{{ Info.usdtAmount }} $</div>
      <!-- <span class="font10">USD</span> -->
      <div class="cztxModel m_b_10">
      <div class="cz" @click="tapBtn('cz')">
        <!-- <img src="../assets/jinbi.png" class="icon" alt="" /> -->
        {{ $t("cz") }}
      </div>
      <div class="tx" @click="tapBtn('tixian')">
        <!-- <img src="../assets/jinbitixian.png" class="icon" alt="" /> -->
        {{ $t("tixian") }}
      </div>
    </div>
    </div>
   
    <div class="font14 m_b_10" style="color: var(--lcitemTitle)">
      {{ $t("zjjl") }}
    </div>
    <!-- <input type="text" class="inputClss" :placeholder="$t('serch')" /> -->
    <van-popover placement="bottom-start" v-model:show="showPopover" :theme="isDark == 1 ? 'dark' : 'light'">
      <div class="selectItem" @click="selectChange('0', $t('qb'))">{{ $t('qb') }}</div>
      <div class="selectItem" @click="selectChange('1', $t('cz'))">{{ $t('cz') }}</div>
      <div class="selectItem" @click="selectChange('2', $t('tx'))">{{ $t('tx') }}</div>
      <div class="selectItem" @click="selectChange('3', $t('lc'))">{{ $t('lc') }}</div>
      <div class="selectItem" @click="selectChange('4', $t('lcsy'))">{{ $t('lcsy') }}</div>
      <div class="selectItem" @click="selectChange('5', $t('lczt'))">{{ $t('lczt') }}</div>
      <div class="selectItem" @click="selectChange('6', $t('zwj'))">{{ $t('zwj') }}</div>
      <div class="selectItem" @click="selectChange('7', $t('yys'))">{{ $t('yys') }}</div>
      <div class="selectItem" @click="selectChange('8', $t('pjj'))">{{ $t('pjj') }}</div>
      <div class="selectItem" @click="selectChange('9', $t('jy'))">{{ $t('jy') }}</div>
      <div class="selectItem" @click="selectChange('10', $t('jyjll'))">{{ $t('jyjll') }}</div>
      <div class="selectItem" @click="selectChange('11', $t('lsjl'))">{{ $t('lsjl') }}</div>
      <div class="selectItem" @click="selectChange('12', $t('flkk'))">{{ $t('flkk') }}</div>
      <div class="selectItem" @click="selectChange('13', $t('lcth'))">{{ $t('lcth') }}</div>
      <template #reference>
        <div class="inputClss">{{ prams.kind ? kindName : $t('qb') }}</div>
      </template>
    </van-popover>
    <!-- <select v-model="prams.kind" class="inputClss" @change="selectChange">
      <option value="">{{ $t('qxz') }}</option>
      <option value="1">{{ $t('cz') }}</option>
      <option value="2">{{ $t('tx') }}</option>
      <option value="3">{{ $t('jy') }}</option>
      <option value="4">{{ $t('lczj') }}</option>
      <option value="5">{{ $t('zt') }}</option>
      <option value="6">{{ $t('td') }}</option>
    </select> -->
    <div class="ListModel" ref="scrollContainer">
      <div class="ItemList" v-for="(item, i) in RecordsList" :key="i">

        <div class="font12 m_l_10 ">{{ $t('' + returnLx(item.kind)) }}</div>
        <div class="title font13">{{ formatAmount(item.amount,3) }}$</div>
        <div  style="flex:none;width:100%;display: flex;justify-content: space-between;">
          <div class="m_l_10 font12">
          {{ formatDate(item.createAt) }}
        </div>
        <div class="font12 m_r_10" v-if="item.kind==1 ||item.kind==2 ">{{ item.status==1?$t("shz"):item.status==2?$t("ytg"):item.status==3?$t("jj"):'' }}</div>
        </div>
 
      </div>
      <div v-if="RecordsList.length == 0" class="noData">
        {{ $t("nodata") }}
      </div>
    </div>
<!-- 
    <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list> -->

    <van-popup v-model:show="showSetting" round position="bottom" :style="{ height: '70%' }">
      <div class="settingModel">
        <!-- <div class="item" @click="updatePassword">
          <span>{{ $t("upPassword") }}</span>
          <img
            src="../assets/jiantouxi.png"
            class="icon"
            alt=""
            v-if="isDark == 1"
          />
          <img
            src="../assets/jiantouxi1.png"
            class="icon"
            alt=""
            v-if="isDark == 0"
          />
        </div> -->
        <div class="item">
          <span>{{ $t("mode") }}</span>

          <div class="rightBtn">
            <!-- <span class="m_r_10">{{ $t("qsms") }}</span> -->
            <img src="@/assets/taiyang.png" class="icons" alt="">
            <van-switch v-model="isDark" size="20px" @change="chaneg" active-color="#073c71" inactive-color="#dcdee0"
              active-value="1" inactive-value="0" />
            <img src="@/assets/a-yueliang.png" class="icons" alt="">
            <!-- <span class="m_l_10"> {{ $t("ssms") }}</span> -->
          </div>
        </div>
        <!-- <div class="fixedBtn2">
          {{ $t("tcdl") }}
        </div> -->
      </div>
    </van-popup>
    <van-popup v-model:show="showCZTX" round position="bottom" :style="{ height: '70%' }">
      <div class="cztxMoedl">
        <div class="header">
          <div class="gl m_b_10" style="    display: flex;
    align-items: center;">{{ $t(title) }}
            <div v-if="title == 'cz'" style=" margin-left: 10px; display: flex;
    align-items: center;">
              <van-switch v-model="checked" size="18px" @click="checkedjs" />
              <span class="font12">{{ $t('jiasu') }}</span>
            </div>
          </div>
          <div @click="handleclose">{{ $t("close") }}</div>
        </div>
        <div v-if="title == 'cz' && !checked" class="font12">{{ $t("qsybepcz") }}</div>
        <div class="card" v-if="checked">
          <div class="font12 m_b_10">{{ $t("jiasu") }}</div>
          <div style="color: var(--tradeGL)">
            <input type="text" class="input" v-model="jsValue" :placeholder="$t('qsrqkh')" />
          </div>
        </div>
        <div class="card" v-if="!checked">
          <div class="font12 m_b_10">{{ $t("srje") }}</div>
          <div style="color: var(--tradeGL)">
            <input type="text" class="input" v-model="amount" :placeholder="$t('qsr')" />
          </div>
        </div>
        <div class="tstext" v-if="!checked">
          <div class="left">
            <div class="diandian"></div>
            {{ $t("ky") }}
          </div>
          <div class="right">{{ Info.usdtAmount || 0 }}</div>
        </div>
        <div class="tstext" v-if="checked">
          <div class="left">
            <div class="diandian"></div>
            {{ $t("jszy") }}
          </div>

        </div>
        <div class="tstext" v-if="title != 'cz'">
          <div class="left" :class="Info.betTotalAmount > -10 ? 'rise' : ''">
            <div class="diandian"></div>
            {{ $t("txdbsxf") }} 5$
          </div>
        </div>
        <div class="tstext" v-if="title != 'cz'">
          <div class="left" :class="Info.betTotalAmount <= -10 ? 'rise' : ''">
            <div class="diandian"></div>
            {{ $t("wcjyls") }} 10$({{ $t('msxf') }})
          </div>
        </div>
        <div class="tstext" v-if="title != 'cz'">
          <div class="left">
            <div class="diandian"></div>
            {{ $t("txgz") }}
          </div>
        </div>
        <div class="fixedBtn" @click="handleTX">
          {{ $t("qr") }}
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import i18n from '@/i18/index';
import { useStore } from "vuex";
import { onMounted, ref, onBeforeUnmount, reactive } from "vue";
import { Popup, Switch, showToast } from "vant";
import { useRouter } from "vue-router";
import { userRecords, userTake, userInfo ,bscSpeed} from "@/api/api";
import Contract from "@/api/wallet/contract";
import { userStore } from "@/stores/modules/user";
import { formatDate, formatAmount } from '@/api/kit';
const router = useRouter();
const store = useStore();
const showPopover = ref(false)
const isDark = ref(0);
const jsValue = ref('')
const showSetting = ref(false);
const showCZTX = ref(false);
const title = ref("");
const RecordsList = ref([]);
const scrollContainer = ref();
const total = ref(0);
const selectType = ref('')
const amount = ref('')
const Info = ref({})
const checked = ref(false)
const kindName = ref('')
const prams = reactive({
  page: 0,
  size: 10,
  kind: ''
});
onMounted(() => {
  if (localStorage.getItem("isDark")) {
    isDark.value = localStorage.getItem("isDark");
  }
  getuserRecords();
  getuserInfo()
  scrollContainer.value.addEventListener("scroll", handleScroll);
});
onBeforeUnmount(() => {
  if (scrollContainer.value) {
    scrollContainer.value.removeEventListener("scroll", handleScroll);
  }
});
const handleclose = () => {
  checked.value = false
  showCZTX.value = false
}
const handleScroll = () => {
  if (
    scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop ===
    scrollContainer.value.clientHeight
  ) {
    console.log("滚动条到底部了");
    if (total.value > RecordsList.value.length) {
      prams.page += 1;
      getuserRecords();
    }
  }
};
function timestampToDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

const checkedjs = () => {

}
const handleTX = () => {
  if (title.value == 'tixian') {
    if (amount.value > Info.value.usdtAmount) {
      showToast(i18n.global.t('txxyye'));
      return
    }
    if (amount.value < 100) {
      showToast(i18n.global.t('tx100q'));
      return
    }
    amount.value = Number(amount.value)
    userTake({ amount: amount.value }).then(res => {
      if (res && res.code == 10000) {
        showToast(i18n.global.t('txcg'));
        prams.page=0;
        RecordsList.value =[]
        getuserRecords();
        showCZTX.value = false
      }else{
        showToast(i18n.global.t('wlycqcxtj'));
      }
    })
  } else {
    if (!checked.value) {
      if (amount.value <= 0) {
        showToast(i18n.global.t('czjedy0'));
        return
      } 
      Contract.recharge((amount.value)).then((res)=>{
        if(res.code == 200){
          showToast(i18n.global.t('czcg'));
        }else{
          showToast(i18n.global.t(res.message || 'czsb'));
        }
        RecordsList.value =[]
        prams.page=0;
        getuserRecords();
        showCZTX.value = false
      }).catch((e)=>{
        showToast(e);
      })
    } else { //确认加速
      bscSpeed({block:jsValue.value}).then(res=>{
        console.log(res)
        if(res && res.code==20000){
          showToast(i18n.global.t('jssb'));
          showToast(res.message);
        }else if(res){
          RecordsList.value =[]
          showToast(i18n.global.t('jscg'));
          showCZTX.value = false
          jsValue.value = ''
          prams.page=0;
         getuserRecords();
        }
       
      })
    }

  }
}
const updatePassword = () => {
  router.push({ path: "/updatePassWord" });
};

const chaneg = (e) => {
  0;
  console.log(e);
  if (e == 0) {
    document.body.setAttribute("class", "light");
    store.state.isDark = 0;
    localStorage.setItem("isDark", 0);
  } else {
    document.body.setAttribute("class", "dark");
    store.state.isDark = 1;
    localStorage.setItem("isDark", 1);
  }
  localStorage.setItem("activeTabKey", 5);
  location.reload();
};
const tapBtn = (e) => {
  showCZTX.value = true;
  title.value = e;
};
const getuserInfo = () => {
  userInfo().then(res => {
    console.log(res)
    if (res && res.user) {
      Info.value = res.user
      localStorage.setItem('userData', JSON.stringify(res.user))
    }
  })
}
const getuserRecords = () => {
  userRecords(prams).then((res) => {
    console.log(res);
    if (res && res.list) {
      RecordsList.value = [...RecordsList.value, ...res.list];
      total.value = res.total;
 
    }
 
} );

 
};
const selectChange = (item, name) => {
  prams.kind = item
  kindName.value = name
  prams.page = 0
  RecordsList.value = []
  showPopover.value = false
  getuserRecords()
}

const returnLx = (e) => {
  let arr = [
    "cz",
    "qk",
    "gmlc",
    "lcsy",
    "lcsyzt",
    "zwj",
    "yys",
    "pjj",
    "jy",
    "jyjll",
    "lsjl",
    "flkk",
    "lcth"
  ];

  return arr[(e - 1)]
};
</script>
<style  lang="less">
.assetModel {
  height: 100%;
  background: var(--backgroud);
  padding: 30px 10px;
  box-sizing: border-box;
  position: relative;

  .cztxMoedl {
    background: var(--backgroud);
    padding: 15px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .settingModel {
    background: var(--backgroud);
    padding: 15px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    .item {
      border-bottom: 1px solid var(--homeCardBg);
      padding: 10px 0;
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 13px;
      color: var(--tradeGL);
      display: flex;
      align-content: center;
      justify-content: space-between;

      .rightBtn {
        display: flex;
        align-items: center;

        font-size: 10px;
      }

      .icon {
        width: 10px;
        height: 10px;
      }
    }
  }

  .setting {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
  }

  .inputClss {
    width: 100%;
    box-sizing: border-box;
    height: 35px;
    font-size: 13px;
    line-height: 35px;
    background-color: var(--inputBg);
    border-radius: 5px;
    border: 0;
    color: var(--inputText);
    padding: 0 10px;
  }

  .input {
    width: 100%;

  }

  .assetCardModel {
    text-align: center;
    position: relative;
    background: var(--homeCardBg);
    padding: 15px 5px;
    border-radius: 5px;
    margin: 10px 0;
  }

  .cztxModel {
    display: flex;
    justify-content: space-evenly;

    .tx{
      background: #e4e4e4;
      width: 48%;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      border-radius: 5px;
      color:var(--cztxBG);
      font-weight: bold;
    }

    .cz {
      font-weight: bold;
      background: var(--cztxBG);
      width: 48%;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      border-radius: 5px;
      color:#FFF;
    }

    .icon {
      margin-right: 5px;
      width: 20px;
      height: 20px;
    }
  }

  .ListModel {
    height: calc(100vh - 300px);
    overflow: auto;

    .ItemList {
      flex-wrap: wrap;
      background: var(--homeCardBg);
      border-radius: 5px;
      margin: 15px 0;
      padding: 10px 10px 10px;
      position: relative;
      display: flex;
      justify-content: space-between;

      .title {
        color: var(--lcitemTitle);
        margin-bottom: 10px;
        padding: 0 10px;
      }

      .tagModel {
        padding: 0 10px;
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
      }

      .tag {
        background: var(--lcitemTagBG);
        color: var(--lcitemTagText);
        margin-right: 10px;
        border-radius: 10px;
        padding: 2px 8px;
        height: 15px;
        line-height: 15px;
        font-size: 11px;
      }
    }
  }

  .jlfelx {
    display: flex;
    flex-wrap: wrap;

    .w50 {
      width: 50%;
    }
  }

  .gl {
    color: var(--tradeGL);
  }

  .header {
    display: flex;
    justify-content: space-between;
  }

  .card {
    background: var(--homeCardBg);
    margin: 15px 0 10px;
    padding: 10px;
    border-radius: 5px;

    .input {
      background: transparent;
      border: 0;
    }
  }

  .tstext {
    display: flex;
    font-size: 12px;
    line-height: 12px;
    justify-content: space-between;
    margin: 20px 0;

    .left {
      display: flex;
      align-items: center;
    }

    .icon {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }

  .center {
    text-align: center;
  }

  .fixedBtn {
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    width: calc(100% - 30px);
    text-align: center;
    padding: 10px 0;
    background-color: #5ac326;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
  }

 

  .fixedBtn2 {
    font-size: 13px;
    line-height: 13px;
    color: #fff;
    width: calc(100% - 30px);
    text-align: center;
    padding: 10px 0;
    background-color: #a5a8ac;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
  }

  .icons {
    width: 20px;
    margin: 0 10px;
  }

  .diandian {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tradeGL);
    margin-right: 5px;
  }
}
.selectItem {
    width: 150px;
    text-align: center;
    line-height: 35px;
    font-size: 13px;
    border-bottom: 1px solid #cccccc1c;
  }

.van-popover__wrapper {
  width: 100% !important;
}</style>